<template>
	<view class="creativeCenter">
		<view class="header">
			<image class="left" src="../../static/Frame-1.png" mode="aspectFit"></image>
			<image class="logo" src="../../static/logo.png" mode="aspectFit"></image>
		</view>
		<view id="top"></view>
		<view class="top">
			 <u-tabs
			 ref="tabs"
			    :list="allClassify"
			    lineWidth="30"
			    lineHeight="3"
			    lineColor="linear-gradient(89deg, #59E787 0%, #4AEAE5 100%)"
				@change="tabsChange"
			    :activeStyle="{
			        fontWeight: 'bold',
					color:'#58E78B'
			    }"
			    :inactiveStyle="{
			        color: '#FFFFFF',
			    }"
			    itemStyle="padding-bottom: 10rpx; height: 34px;width: 172.5rpx;box-sizing: border-box;"
			    >
			</u-tabs>
		</view>
		<view class="abilityTypes" >
			<view class="abilityList">
				<view class="abilityItem" v-for="(child,idx) in abilityTypes" :key="idx" @click="toCreate(child)">
					<squareBox :ratio='341/230'>
						<view class="boxInner" :style="{background: background[findIndex(child)%background.length]}">
							<!-- <image :src="child.image || banners[idx%banners.length]" mode="aspectFill" class="banner"></image> -->
							<view class="abilityName">
								<image class="typeIcon" :src="child.icon" ></image>
								{{child.name}}
							</view>
						</view>
					</squareBox>
				</view>
			</view>
		</view>
		<!-- ios黑条 -->
		<safeBottom></safeBottom>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// banners:['/static/wacz.png','/static/wzcz.png','/static/pyqwa.png','/static/xmtxz.png','/static/dspjb.png','/static/hpwa.png','/static/aiwd.png'],
				background:['linear-gradient(113deg, #CE7591 0%, #D38497 100%)','linear-gradient(113deg, #D5AB59 0%, #E0C188 100%)'
							,'linear-gradient(113deg, #ffaaff 0%, #D38497 100%)','linear-gradient(113deg, #aa0000 0%, #E0C188 100%)'
							,'linear-gradient(113deg, #ff5500 0%, #aaff00 100%)','linear-gradient(113deg, #5500ff 0%, #aaaa7f 100%)'
							,'linear-gradient(113deg, #00007f 0%, #E0C188 100%)','linear-gradient(113deg, #00ff00 0%, #D38497 100%)'
							,'linear-gradient(113deg, #aa007f 0%, #55ffff 100%)','linear-gradient(113deg, #0055ff 0%, #ffff00 100%)'
							,'linear-gradient(113deg, #00aa7f 0%, #D38497 100%)','linear-gradient(113deg, #00aa7f 0%, #E0C188 100%)'
							],
				abilityTypes: [],
				allClassify:[],
				scrollTop: 0
			};
		},
		created() {
			this.getPackage()
		},
		mounted() {
			setTimeout(() => {
				this.$refs.tabs.init()
			},500)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 在allClassify.children中查找idnex，固定对应分类的颜色
			findIndex(child) {
				return this.allClassify[0].children.findIndex(item => item.id === child.id)
			},
			tabsChange(item) {
				console.log(item,'item')
				this.abilityTypes = item.children
				if(this.scrollTop > 80) {
					// 向上滚动过，并触发了吸顶，此时点击tab滚动到吸顶位置
					setTimeout(() => {
						uni.pageScrollTo({
							selector: '#top'
						})
					},100)
				}
			},
			handleClassify(data) {
				this.allClassify.push({
					name:'全部',
					children: data
				})
				let store = {}
				data.forEach(item => {
					if(!store[item.classify]) {
						store[item.classify] = [item]
					}else {
						store[item.classify].push(item)
					}
				})
				for(let key in store) {
					this.allClassify.push({
						name: key,
						children: store[key]
					})
				}
			},
			getPackage() {
				this.$request({
					url:'/api/v1/miletus/word/ai/spell/package',
					method:'get',
				}).then(res => {
					console.log(res,'ress')
					this.abilityTypes = res;
					this.handleClassify(res)
				})
			},
			toCreate(item) {
				uni.setStorageSync('createItem',item)
				uni.navigateTo({
					url:`/pages/createRoom/createRoom?name=${item.name}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.creativeCenter {
		padding: 0 30rpx 30rpx;
		background-image: url('../../static/bg.png');
		background-size: cover;
		.header {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 40rpx;
			.left {
				width: 360rpx;
				height: 125rpx;
			}
			.logo {
				width: 220rpx;
				height: 192rpx;
			}
		}
		.top {
			position: sticky;
			top: var(--window-top);
			z-index: 10;
			background-color: #1A1C2F;
			// background-image: url('../../static/bg.png');
			background-size: 100%;
		}
		.abilityTypes {
			margin-bottom: 34rpx;
		}
		.abilityList {
			padding-top: 20rpx;
			$gutter: 19rpx;
			@include row($gutter);
			.abilityItem {
				border-radius: 20rpx;
				margin-top: $gutter;
				@include col(12,$gutter);
				.boxInner {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
				.banner {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
				.abilityName {
					position: absolute;
					width: 100%;
					height: 85rpx;
					// background: linear-gradient(0deg, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 100%);
					// border-radius: 0px 0px 19rpx 19rpx;
					left: 0;
					bottom: 0;
					top: 0;
					right: 0;
					margin: auto;
					z-index: 1;
					padding: 0 20rpx 0;
					font-size: 30rpx;
					font-weight: 600;
					color: #FFFFFF;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.typeIcon {
						$s: 38rpx;
						width: $s;
						height: $s;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
